<template>
    <div class="wh-100 fx-24" style="background-color: #fff">
        <div class="w-100 d-flex-between-center bor-base-b px-12" style="height: 60px">
            <div class="fs-16 fw-7">添加广告</div>
            <Button class="fs-12" @click="$router.back()">返回</Button>
        </div>
        <el-form ref="form" :model="form" :rules="ruleForm" label-width="150px" class="w-40  mt-32">
            <el-form-item label="广告类型" :rules="[{ required: true, message: '该项必填', trigger: 'change' }]" prop="advertisementType">
                <el-radio-group @change="clickTypesOfAdvertisement" v-model="form.advertisementType">
                    <el-radio label="宣传广告">宣传广告</el-radio>
                    <el-radio label="双选会">双选会</el-radio>
                    <el-radio label="宣讲会">宣讲会</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="formShow.doubleId" label="选择双选会" prop="image">
                <Select v-model="form.doubleId" @on-change="dounleChange">
                    <Option v-for="item in doubleList" :value="item.doubleELectionId" :key="item.doubleELectionId">{{ item.doubleELectionName }}</Option>
                </Select>
                <div v-if="showMes" class="d-flex mt-8" style="min-width: 280px;height: 43px">
                    <img style="width: 75px;height: 43px" :src="rowItem.doubleELectionPhotoUrl" />
                    <div class="ml-8 fs-12" style="width: calc(100% - 75px);height: 43px;word-wrap: break-word">{{ rowItem.doubleELectionName }}</div>
                </div>
            </el-form-item>

            <el-form-item
                v-if="formShow.advertisementPhoto"
                label="广告图片"
                :rules="[{ required: formRequired.advertisementPhoto,  trigger: 'change', validator: validateEvidentiaryMaterial }]"
                prop="image"
            >
                <uploadPicture @beforeUpload="beforeUpload" :images="backImages" ref="supportingMaterialRef" :max-count="1"></uploadPicture>
                <div class="w-100" >点击上传广告图片，图片尺寸比例：16：9,格式：jpg,png</div>
            </el-form-item>
            <el-form-item v-if="formShow.advertisementUrl" label="广告地址">
                <el-input v-model="form.advertisementUrl" placeholder="输入点击图片的页面网址"></el-input>
            </el-form-item>
            <el-form-item label="广告上传位置" :rules="[{ required: true, message: '该项必填', trigger: 'change' }]" prop="advertisementLocation">
                <el-radio-group v-model="form.advertisementLocation">
                    <el-radio :label="'0'">首页轮播图</el-radio>
                    <el-radio :label="'1'">首页广告位</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sort" placeholder="显示顺序，数字越小越靠前"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-if="localData" type="primary" @click="update">修改</el-button>
                <el-button v-else type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import uploadPicture from '@/components/uploadPicture/uploadPicture16.vue';
import {
    addAnADAPI,
    obtainDataAboutTheDualSelectionMeetingAPI,
    updateAnADAPI
} from '@/api/siteManagement/advertisingManagementApis';
import { updateVal } from '@/util/ObjectUtil';
import { imageUploadDataApi } from '@/api/bys';
const ruleForm = {};
export default {
    components: { uploadPicture },
    data() {
        return {
            validateEvidentiaryMaterial: (rule, value, callback) => {
                if (this.formRequired.advertisementPhoto) {
                    if (this.$refs.supportingMaterialRef.formFile.length > 0 || this.backImages!== null) {
                        callback();
                    } else {
                        callback(new Error('请上传广告图片'));
                    }
                } else {
                    callback();
                }
            },
            form: {
                advertisementType: '宣传广告', //广告类型
                advertisementPhoto: '', //广告图片
                advertisementUrl: '', //广告地址
                advertisementLocation: '0', //广告位置
                doubleId: '', //双选会ID
                sort: 0 //排序
            },
            formRequired: {
                advertisementPhoto: true //广告图片
            },
            formShow: {
                advertisementUrl: true, //广告地址
                advertisementPhoto: true, //广告图片
                doubleId: false
            },
            ruleForm,
            backImages: null,
            showMes: false,
            doubleList: [],
            rowItem: {
                doubleELectionId: '',
                doubleELectionName: '',
                doubleELectionPhotoUrl: ''
            },
            localData:null,
            dataRow:null,
            changeImage:false
        };
    },
    mounted() {
        this.mutualSelectionList();
        if(this.$route.query.optionType){
            let options=this.$route.query
            console.log(options)
            if(options.optionType === '添加广告'){
                this.form.advertisementType='宣传广告'
                this.form.advertisementPhoto=''
                this.form.advertisementUrl=''
                this.form.advertisementLocation='0'
                this.form.doubleId=''
                this.form.sort=0
            }
        }else{
            this.localData = sessionStorage.getItem('advertisingDetail');
            if (this.localData) {
                this.dataRow = JSON.parse(this.localData).dataRow;
                updateVal(this.form,this.dataRow)
                this.backImages=this.dataRow.advertisementPhoto
                this.$refs.form.validateField('image')
                this.clickTypesOfAdvertisement(this.dataRow.advertisementType)

            }
        }



    },
    methods: {
        beforeUpload(){
            this.$refs.form.validateField('image')
            this.changeImage=true
        },
        update(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    // region TODO 上传证明材料
                    if(this.changeImage){
                        const formData = new FormData();
                        formData.append('file', this.$refs.supportingMaterialRef.formFile[0]);
                        const uploadResponse = await imageUploadDataApi(formData);
                        if(uploadResponse.code === 200){
                            this.form.advertisementPhoto=uploadResponse.result
                            updateAnADAPI({ ...this.form,id:this.dataRow.id }).then((res) => {
                                if (res.code === 200) {
                                    this.$Message.success("添加成功")
                                    this.$router.back()
                                }
                            })
                        }
                    }else{
                        updateAnADAPI({ ...this.form,id:this.dataRow.id }).then((res) => {
                            if (res.code === 200) {
                                this.$router.back()
                                this.$Message.success("添加成功")
                            }
                        })
                    }
                }
            });
        },
        save() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    // region TODO 上传证明材料
                    if(this.formRequired.advertisementPhoto){
                        const formData = new FormData();
                        formData.append('file', this.$refs.supportingMaterialRef.formFile[0]);
                        const uploadResponse = await imageUploadDataApi(formData);
                        if(uploadResponse.code === 200){
                                this.form.advertisementPhoto=uploadResponse.result
                            addAnADAPI(this.form).then((res) => {
                                if (res.code === 200) {
                                    this.$Message.success("添加成功")
                                    this.$router.back()
                                }
                            })
                        }
                    }else{
                            addAnADAPI(this.form).then((res) => {
                                if (res.code === 200) {
                                    this.$Message.success("添加成功")
                                    this.$router.back()
                                }
                            })
                    }
                }
            });
        },
        mutualSelectionList() {
            obtainDataAboutTheDualSelectionMeetingAPI().then(res => {
                if (res.code === 200) {
                    this.doubleList = res.result;
                    if(this.localData){
                        this.dounleChange(this.dataRow.doubleId)
                    }
                }
            });
        },
        dounleChange(id) {
            const Item = this.doubleList.find(item => item.doubleELectionId === id);
            updateVal(this.rowItem, Item);
            this.showMes = true;
        },
        clickTypesOfAdvertisement(item) {
            this.formChange(item)
            this.formShowChange(item);
            this.formRequiredChange(item);
        },
        formChange(type){
            if (type === '宣传广告') {
                this.form.doubleId=''
            }
            if (type === '双选会') {
            }
        },
        formRequiredChange(type) {
            if (type === '宣传广告') {
                this.formRequired.advertisementPhoto = true;
            }
            if (type === '双选会') {
                this.formRequired.advertisementPhoto = false;
            }
        },
        formShowChange(type) {
            if (type === '宣传广告') {
                this.formShow.advertisementUrl = true;
                this.formShow.advertisementPhoto = true;
                this.formShow.doubleId = false;
            }
            if (type === '双选会') {
                this.formShow.advertisementUrl = false;
                this.formShow.advertisementPhoto = false;
                this.formShow.doubleId = true;
            }
        }
    }
};
</script>
